<!--
 @description 门店地址选择
 @fileName SadAddress.vue
 @author zengqiongying
 @created 2023-06-12 10:57:48
-->
<template>
  <div class="has-top-pt">
    <div class="ctm-content-head-fixed">
      <SearchInput
        v-model="searchValue"
        placeholder="搜索内容"
        @search="resetPageData"
        @clear="resetPageData"
        @cancel="resetPageData"
      />
    </div>
    <div class="cus-choice-page">
      <List ref="qmpList" v-model:finished="finished" :reset-fun="resetData" :load="load" :refresh="load">
        <div class="dealer-list">
          <div v-for="(item, i) in list" :key="i" class="item">
            <div class="item-content">
              <div class="title">{{ item.name }}</div>
              <div class="code">{{ item.code }}</div>
              <div class="address">{{ item.shopAddr }}</div>
            </div>
            <div class="btn-choice" @click="onSelect(item)">确认</div>
          </div>
        </div>
      </List>
    </div>
  </div>
</template>

<script lang="ts">
  import { ref, reactive, toRefs, getCurrentInstance, nextTick } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import SearchInput from '@/components/SearchInput/index.vue'
  import List from '@/components/List/index.vue'
  import { querySadAddress } from '@/apis/Search'

  export default {
    name: 'SADAddressList',
    components: { SearchInput, List },
    setup(props: any, ctx: any) {
      const { proxy }: any = getCurrentInstance()
      const $router = useRouter()
      const $route = useRoute()
      const qmpList = ref()
      const datas = reactive({
        searchValue: '',
        list: [],
        finished: false
      })
      const load = async (page: number, rows: number) => {
        if ([null, undefined, ''].includes(datas.searchValue)) {
          datas.list = []
          datas.finished = true
          return
        }
        return querySadAddress(datas.searchValue).then((res: any) => {
          const list = res.data || []
          if (page === 1) {
            datas.list = list
          } else {
            datas.list = datas.list.concat(list)
          }
          datas.finished = true
        })
      }
      const resetData = () => {
        datas.list = []
      }
      const resetPageData = () => {
        qmpList.value.resetPageData()
      }

      const onSelect = (data: object) => {
        const fucName = $route.query.name
        proxy.$SimpleEvents.emit(fucName, data)
        nextTick(() => {
          $router.goBack()
        })
      }
      return {
        ...toRefs(datas),
        load,
        resetData,
        qmpList,
        resetPageData,
        onSelect
      }
    }
  }
</script>
<style lang="less" scoped>
  .cus-choice-page {
    position: relative;
    height: calc(100vh - 88px);
    .dealer-list {
      padding: 8px 14px;
      .item {
        margin-bottom: 8px;
        padding: 16px;
        min-height: 100px;
        box-sizing: border-box;
        border-radius: var(--radius-xl);
        background: var(--bg-global-weaker);
        display: flex;
        align-items: center;
        .btn-choice {
          min-width: 44px;
          height: 24px;
          padding: 0 8px;
          box-sizing: border-box;
          border-radius: var(--radius-l);
          display: flex;
          align-items: center;
          justify-content: center;
          font: var(--font-control-xl);
          color: var(--button-main-default);
          background: var(--bg-focusing-brand);
        }
        .item-content {
          flex: 1;
          margin-right: 8px;
          padding-right: 4px;
          border-right: 1px solid var(--divisionline-weak);
          font: var(--font-main-body);
          color: var(--texticon-default-stronger);
          > div {
            min-height: 20px;
          }
          .title {
            font: var(--font-main-title-strengthen);
            color: var(--texticon-default-strong);
          }
          .code {
            margin: 4px 0;
          }
          .address {
            padding-left: 24px;
            min-height: 20px;
            background: url(~@/assets/images/location.png) left top;
            background-size: 20px 20px;
            background-repeat: no-repeat;
          }
        }
      }
    }
  }
  .popup-detail-container {
    height: 70vh;
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }
  }
</style>
